<template>
  <div class="wrapper">
    <Auditrecordtable
      key="0"
      :invoice_body_belong="activeName"
      v-if="activeName == 0"
    ></Auditrecordtable>
    <Auditrecordtable
      key="1"
      :invoice_body_belong="activeName"
      v-if="activeName == 1"
    ></Auditrecordtable>
    <Auditrecordtable
      key="2"
      :invoice_body_belong="activeName"
      v-if="activeName == 2"
    ></Auditrecordtable>
    <Auditrecordtable
      key="3"
      :invoice_body_belong="activeName"
      v-if="activeName == 3"
    ></Auditrecordtable>
    <!-- 审核记录 -->
    <!-- <div class="allOrderContainer">
            <div class="orderHeader" style="margin: 5px 0px 0px 0px">
                <div class="orderSearch">
                    <el-form ref="form" :model="searchParams" :inline="true">
                        <el-form-item label="审核记录名称">
                            <el-input v-model="searchParams.name" clearable type="text" placeholder="请输入名称" />
                        </el-form-item>
                        <el-form-item>
                            <el-button data-tracker="P41-1" type="primary" icon="el-icon-search" @click="handleSearch">查询
                            </el-button>
                            <el-button data-tracker="P41-2" type="primary" plain icon="el-icon-refresh" @click="handleReset">重置
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="actions">
                <div class="left">
                </div>
                <div class="right" style="margin-bottom:10px">
                    <el-pagination small :current-page="paginations.pageIndex" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" border align="center" stripe
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="45"> </el-table-column>
                <el-table-column prop="" label="序号" width="50" type="index"></el-table-column>
                <el-table-column prop="name" label="审核记录名称"  width="180"></el-table-column>
                <el-table-column prop="status" label="审核状态"  width="120">
                    <template slot-scope="scope">
                        {{['待审核','审核通过','审核打回'][scope.row.status]}}
                    </template>
                </el-table-column>
                <el-table-column prop="scene_type" label="审核类型"  width="120">
                    <template slot-scope="scope">
                        {{['','应付审核','报销审核'][scope.row.scene_type]}}
                    </template>
                </el-table-column>
                <el-table-column prop="current_approver_id_name" label="当前审批人" width="120"></el-table-column>
                <el-table-column prop="final_approver_id_name" label="最终审批人" width="120"></el-table-column>
                <el-table-column prop="current_level_id" label="当前审批级别" width="120"></el-table-column>
                <el-table-column prop="final_level_id" label="最终审批级别" width="120"></el-table-column>
                <el-table-column prop="update_time" label="更新时间" min-width="180" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-time="scope.row.update_time"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="last_editor_id_name" label="操作人" min-width="180"></el-table-column>

                <el-table-column align="center" label="操作" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button data-tracker="P41-3"  style="margin-right: 10px" type="text" plain size="mini"
                            @click="handleClickEdit(scope.row, 'detail')">详情
                        </el-button>
                     
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer :key="Math.random()" :size="730" :visible.sync="drawerVisible" direction="rtl"
            :before-close="handleClose">
            <template slot="title">
                <div>
                  {{info.scene_type === '1'?'应付详情':'报销详情'}}
                </div>
            </template>
            <AuditRecord :info="info" @close="handleCloseDrawer" />
        </el-drawer> -->
  </div>
</template>

<script>
import {
  ExamineRecordList,
  ExamineRecordDetail,
  ExamineRecordUpdate,
} from "@/api/auditing";
import AuditRecord from "./components/auditRecord.vue";
import Auditrecordtable from "./components/auditrecordtable/auditrecordtable.vue";
export default {
  name: "auditrecordsList",
  components: { AuditRecord, Auditrecordtable },
  props: [],
  data() {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 0,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      tableData: [],
      searchParams: {},
      checkedRows: [],
      drawerVisible: false,
      info: {},
      activeName: 0,
    };
  },
  mounted() {},
  watch: {
    $route: {
      handler(newV, oldV) {
        if (this.$route.query.type) {
          this.activeName = this.$route.query.type;
        }
        this.getRecordList();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.checkedRows = val.map((item) => item.id);
    },
    handleSearch() {
      this.paginations.pageIndex = 1;
      this.getRecordList();
    },
    handleReset() {
      this.searchParams = {
        name: "",
      };
      this.paginations.pageIndex = 1;
      this.getRecordList();
    },
    getRecordList() {
      // ExamineRecordList({
      //     page: this.paginations.pageIndex,
      //     page_size: this.paginations.pageSize,
      //     ...this.searchParams
      // }).then((res) => {
      //     this.paginations.total = res.data.total;
      //     this.tableData = res.data.list || [];
      // });
    },
    handleClickEdit(row, mode) {
      //   this.nowId = id;
      //   this.mode = mode;
      this.info = row;
      this.drawerVisible = true;
    },
    handleCloseDrawer(isUpdate) {
      this.drawerVisible = false;
      isUpdate && this.getRecordList();
    },
    handleClose() {
      this.drawerVisible = false;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getRecordList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getRecordList();
    },
    // tab 切换
    // tab选中
    handleClickAct(value) {
      this.activeName = value;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs--border-card {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.wrapper {
  padding: 10px 15px;
  background-color: #fff;
}

// .allOrderContainer {
//   .orderHeader {
//     background-color: #fff;

//     .orderSearch {
//       ::v-deep .el-form--inline .el-form-item__content {
//         vertical-align: middle;
//       }

//       ::v-deep .el-collapse {
//         border-top: none;
//         border-bottom: none;
//       }
//     }
//   }

//   .actions {
//     display: flex;
//     justify-content: space-between;
//     flex-wrap: wrap;
//     width: 100%;
//     background-color: #fff;
//   }
// }
</style>